<template>
  	<div class="card-container">
		<van-cell title="会议编码">
			{{ detail.meetingCode }}
			<van-button
				size="mini"
				icon="column"
				class="ml-2"
				@click="copyMeetingCode(detail.meetingCode)"
			>复制</van-button>
		</van-cell>
		<van-cell title="申请时间">{{ detail.gmtCreate }}</van-cell>
		<van-cell title="会议时间">{{ detail.meetingTime }}</van-cell>
		<van-cell title="会议状态">
			{{ getMeetingStatus }}
			<a
				v-if="detail.status == 2"
				href="javascript:void"
				@click="showReason(detail.reason)"
			>查看原因</a>
		</van-cell>
		<van-cell title="会议形式">
			<span v-if="detail.type == 0">线下会</span>
			<span v-if="detail.type == 1">线上会</span>
		</van-cell>
		<van-cell
			v-if="detail.type == 1 && detail.speakerUrl"
			title="会议号"
			class="line-clear"
			@click.stop="copyMeetingCode(detail)"
		>
			腾讯会议：{{detail.onlineCode}}
			<van-button size="small" icon="column">复制</van-button>
		</van-cell>
		<van-cell title="劳务支付进度">
			<span v-if="detail.payStatus == 0">未支付</span>
			<span v-if="detail.payStatus == 1">已支付</span>
		</van-cell>
		<van-cell title=""></van-cell>
		<van-divider
			content-position="center"
			:style="{ color: '#1B40CD', borderColor: '#1B40CD', margin: 0, }"
		>
			参会人员
		</van-divider>
		<van-cell
			v-for="item in speakerList"
			:key="item.speakerId"
		>
			<template #title>
				<span>{{ item.speakerName }}</span>
				<div>
					<van-tag v-if="getSpeakerPayStatus(item) === 'success'" type="success">支付成功</van-tag>
					<van-tag v-if="getSpeakerPayStatus(item) === 'error'" type="error">支付失败</van-tag>
				</div>
			</template>
			<p>{{ item.hospital }}</p>
			<p>{{ item.department }}</p>
		</van-cell>
	</div>
</template>
<script setup>
import { computed, inject, ref, toRefs } from "vue";
import useClipboard from "vue-clipboard3";
import moment from "moment";
import {
  showToast,
  showSuccessToast,
  showNotify,
  showConfirmDialog,
  showDialog,
  Tag
} from "vant";
import useUtils from "@/hooks/useUtils";

const props = defineProps({
	detail: {
		type: Object,
		default: () => {}
	}
});

const constant = inject('constant')
const { toClipboard } = useClipboard();

const getSpeakerPayStatus = (item) => {
	const {detail} = toRefs(props)
	const val = (detail.value.spakers || []).find(val => val.speakerId === item.speakerId)
	if (!val) return ''
	if (val.payStatus == 7) return 'success'
	if (val.payStatus == 8) return 'error'
	return ''
}

const showQrcode = ref(false)
// 会议状态
const getMeetingStatus = computed(() => {
	const { detail } = toRefs(props)
	return useUtils().meetingAuditStatus(detail.value.status)
})
// 讲者列表
const speakerList = computed(() => {
	const { detail } = toRefs(props)
	if (!detail.value.speakerJson) return []
	return JSON.parse(detail.value.speakerJson)
})

// 点击复制
const copyMeetingCode = async (item) => {
	try {
		await toClipboard(`腾讯会议\n会议号：${item.onlineCode}\n入会链接：${item.speakerUrl}`)
		showSuccessToast("复制成功");
	} catch (err) {
		showToast("复制失败");
	}
}

// 查看拒绝原因
const showReason = (because) => showDialog({ title: "拒绝原因", message: because })

// export default {
//   props: ["detail"],
//   name: "detailMeeting",
//   data() {
//     return {
//       showQrcode: false,
//     };
//   },
//   setup() {
//     const store = useStore();
//     const { commit } = useStore();
//     let detail = computed(() => store.state.meeting.meetingDetail);
//     const { toClipboard } = useClipboard();
//     return {
//       detail,
//       toClipboard,
//       store,
//       commit,
//     };
//   },
//   watch: {},
//   inject: ["constant"],
//   mounted() {
//     if (!this.detail || !this.detail.meetingBeginTime) {
//       this.store.dispatch("meeting/detailMeeting");
//     }
//   },
//   methods: {
//     async copySpeakerOnlineUrl() {
//       try {
//         await this.toClipboard(
//           "会议号：" +
//             this.detail.meetingCode +
//             "\n讲者参会链接：" +
//             this.detail.onlineUrl
//         );
//         showSuccessToast("复制成功");
//       } catch (err) {
//         console.log(err);
//         showToast("复制失败");
//       }
//     },
//     getTagClassName(tagCode) {
//       return useUtils().getTagClassName(tagCode);
//     },
//     getAuditState(status) {
//       return this.constant.speakerAuditStatus[status];
//     },
//   },
// };
</script>
